app.controller('dragWidthController', function ($scope, tabService) {
    var selectedTab = tabService.getTabByMenuID();
    $scope.startX = 0;
    if (selectedTab.key == "app.icddictionarytree") {
        $scope.startX=300;
    }
})
app.directive('uiDragWidth', function ($compile, $log, $timeout, $interval, $compile, tabService) {
    return {
        restrict: 'EA',
        controller: 'dragWidthController',
        link: function (scope, element, attr) {
            var dragdiv = "<div class=\"ui-drag-width\" ng-mousedown=\"mouseDown()\" ng-mousemove=\"mouseMove()\" ng-mouseout=\"mouseOut()\" ng-mouseout=\"mouseOut()\" ng-dblclick=\"dblclick()\"></div>"
            var linkFn = $compile(dragdiv);
            element.append(linkFn(scope));
            var xIndex = 0
            var startX = scope.startX;
            var istrue = false;
            var treedefaultwidth = 200;
            var leftmargin = 200;
            var leftwidth = 200;
            var outwidth = 200;
            var topmargin = 152;
            var footheight = 50;
            var linewidth = 5;

            var line = element.find(".ui-drag-width");
            var treepanel = element.find(".tree-panel");
            var leftpanel = element;
            var rightpanel = element.parent().find(".ui-drag-width-right");
            var footpanel = angular.element(".app-footer");

            element.css("width", (leftwidth + startX) + "px");
            treepanel.css("width", (leftwidth + startX) + "px");
            line.css("left", (leftwidth + leftmargin + linewidth + startX) + "px");

            scope.dblclick = function () {
                element.css("width", (leftwidth + startX) + "px");
                treepanel.css("width", (leftwidth + startX) + "px");
                line.css("left", (leftwidth + leftmargin + linewidth + startX) + "px");
                rightpanel.css("width", ($(window).width() - line[0].offsetLeft) + "px");
            }

            scope.mouseDown = function () {
                var e = window.event;
                xIndex = 0;
                istrue = true;
            }

            scope.mouseMove = function () {
                line.css("opacity", "20");
                rightpanel.css("width", ($(window).width() - line[0].offsetLeft) + "px");
            }

            scope.mouseOut = function () {
                var line = element.find(".ui-drag-width");
                if (istrue == false) {
                    angular.element(line).css("opacity", "0");
                }
            }

            element.parent().parent()[0].onmouseup = function () {
                var e = window.event;
                istrue = false;
                angular.element(line).css("opacity", "0");
                $log.log(e.clientX);
            };


            element.parent().parent()[0].onmousemove = function () {
                if (istrue == false) {
                    return;
                }

                var e = window.event;

                if (startX > 0) {
                    if (e.clientX < (outwidth + leftmargin) || e.clientX > (leftwidth + leftmargin + linewidth + startX)) {
                        return;
                    }
                } else {
                    if (e.clientX < (outwidth + leftmargin) || e.clientX > (($(window).width()) * 0.3)) {
                        return;
                    }
                }
                
                var selectedTab = tabService.getTabByMenuID();
                var leftpanel1 = angular.element("#" + "myMenu" + selectedTab.id).find(".ui-drag-width-left");
                var line1 = angular.element("#" + "myMenu" + selectedTab.id).find(".ui-drag-width");
                var treepanel1 = angular.element("#" + "myMenu" + selectedTab.id).find(".tree-panel");
                var rightpanel1 = angular.element("#" + "myMenu" + selectedTab.id).find(".ui-drag-width-right");

                line1.css("left", (e.clientX) + "px");
                leftpanel1.css("height", ($(window).height() - topmargin - footheight) + "px");
                leftpanel1.css("width", (e.clientX - leftmargin - linewidth) + "px")
                treepanel1.css("width", (e.clientX - leftmargin - linewidth) + "px")
                rightpanel1.css("width", ($(window).width() - e.clientX) + "px");
            }

            var listenright = scope.$watch(function () {
                return rightpanel[0].offsetLeft;
            }, function (oldHeight, newHeight) {
                var selectedTab = tabService.getTabByMenuID();
                var contentElement = angular.element("#" + "myMenu" + selectedTab.id).find(".contentElement");
                setSplitterRight(contentElement, selectedTab);
            });

            scope.$on('$destroy', function () {
                listenright = null;
            });
        }
    };
});